<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script id="j$vm" src="../../jsvm/jsre.js" 
        -Dj$vm_ajax_timeout=600000
        -Dj$vm_ajax_nocache=true 
        classpath=""
></script>

<style>
body{
    margin:0px;
    padding:0px;
    border: 0px none black;
    overflow: hidden;
}
.interDiv{
    position:absolute;
    width:50px;
    height:50px;
}

</style>
<script type="text/javascript">

$package("org.jsvm");

$import("js.awt.Component");

J$VM.exec(null, function(scope){
    var E = js.util.Event;

    var rDiv = document.getElementById("rDiv");
    var gDiv = document.getElementById("gDiv");
    var bDiv = document.getElementById("bDiv");

    var _ondrag = function(e){
        var el = e.srcElement;
        switch(e.getType()){
        case "dragstart":
            //el.style.visibility = "hidden";
            break;
        case "dragend":
            //el.style.visibility = "visible";
            break;
        case "mousemove":
            el.style.left = e.
            break;
        }
    };


    E.attachEvent(rDiv, "dragstart", 0, this, _ondrag);
    E.attachEvent(gDiv, "dragstart", 0, this, _ondrag);
    E.attachEvent(bDiv, "dragstart", 0, this, _ondrag);
    E.attachEvent(rDiv, "dragend", 0, this, _ondrag);
    E.attachEvent(gDiv, "dragend", 0, this, _ondrag);
    E.attachEvent(bDiv, "dragend", 0, this, _ondrag);
    E.attachEvent(rDiv, "mousemove", 0, this, _ondrag);
    E.attachEvent(gDiv, "mousemove", 0, this, _ondrag);
    E.attachEvent(bDiv, "mousemove", 0, this, _ondrag);
});

</script>

</head>
<body>
<div id="rDiv" class="interDiv" style="background-color:red;left:10px;top:10px;" draggable="true"></div>
<div id="gDiv" class="interDiv" style="background-color:green;left:60px;top:60px;" draggable="true"></div>
<div id="bDiv" class="interDiv" style="background-color:blue;left:110px;top:110px;" draggable="true"></div>
</body>
</html>
